<!--
 * @Author: Hzl
 * @Date: 2021-10-23 11:47:19
 * @LastEditors: Hzl
 * @LastEditTime: 2021-11-05 20:57:19
 * @Description: 
-->
<template>
<div>
    <!-- 第一行开始 -->
    <div>
        <el-row>
        <el-col :span="16">
            <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item>
                <el-select v-model="form.status" placeholder="状态" clearable>
                    <el-option label="未审核" value="未审核"></el-option>
                    <el-option label="审核通过" value="审核通过"></el-option>
                    <el-option label="审核不通过" value="审核不通过"></el-option>
                    <el-option label="推荐" value="推荐"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input v-model="form.title" placeholder="标题" clearable></el-input>
                </el-form-item>
                <el-form-item>
                <el-select v-model="form.categoryId" placeholder="请选择栏目" clearable>
                    <el-option
                    v-for="item in category"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    ></el-option>
                </el-select>
                </el-form-item>
                <el-form-item>
                <el-button type="primary" @click="toSearch">查询</el-button>
                </el-form-item>
            </el-form>
            </el-col>
            <el-col :span="8" style="text-align:right">
            <el-button type="primary" @click="toPublish">发布咨询</el-button>
            </el-col>
        </el-row>
    </div>
    <!-- 第一行结束-->
    <!-- 第二行开始 -->
    <div>
        <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" :index="1" label="序号" width="50"></el-table-column>
        <el-table-column prop="cover" label="封面" width="150">
            <template slot-scope="scope">
            <img :src="scope.row.cover" alt style="width:100%" />
            </template>
        </el-table-column>
        <el-table-column label="风采">
            <template slot-scope="scope">
            <div>{{scope.row.title}}</div>
            <div>{{scope.row.baseUser && scope.row.baseUser.realname}}</div>
            <div>{{scope.row.category && scope.row.category.name}}</div>
            <div>{{moment(scope.row.publishTime).format('YYYY-MM-DD :HH:mm:ss')}}</div>
            </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="250">
            <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status==='审核通过'">审核通过</el-tag>
            <el-tag type="info" v-if="scope.row.status==='未审核'">未审核</el-tag>
            <el-tag type="warning" v-if="scope.row.status==='推荐'">推荐</el-tag>
            <el-tag type="danger" v-if="scope.row.status==='审核不通过'">审核不通过</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
            <el-button type="text" size="small" @click="roRecommend(scope.row.id,'推荐')">推荐</el-button>
            <el-button type="text" size="small" @click="toAudit(scope.row)">审核</el-button>
            <el-button type="text" size="small" @click="toDelete(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
        </el-table>
    </div>
    <!-- 第二行结束 -->
    <!-- 第三行开始 -->
    <div>
        <el-pagination
        class="page"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="params.pageSize"
        layout="total,sizes, prev, pager, next,jumper"
        :total="total"
        ></el-pagination>
    </div>
    <!-- 第三行结束 -->
    <!-- 审核模态框 -->
    <el-dialog class='modal' title="审核风采信息" :visible.sync="visible" width="60%" >
        <!-- 文章标题 -->
        <div style="text-align:center;line-height:2em;font-size:20px">{{article.title}}</div>
        <!-- 文章内容 -->
        <div v-html='article.content'></div>
        <span slot="footer" class="dialog-footer">
            <el-button  type='danger' @click='toChangeStatus(article.id,"审核不通过")'>审核不通过</el-button>
            <el-button type="primary" @click='toChangeStatus(article.id,"审核通过")'>审核通过</el-button>
        </span>
        </el-dialog>
    </div>
</template>
<script>
let moment = require("moment");
import { findAll,changeStatus,deleteByIdPro,pageQueryArticles } from "@/api/information";

export default {
    data() {
        return {
            form: {},
            // 展示当前行的文章内容
            article:{},
            category: [],
            tableData: [],
            visible: false,
            params: {
                page: 1,
                pageSize: 10
            },
            total: 0
        };
    },
    watch: {
        params: {
        handler() {
            this.findAllArticle();
        },
        deep: true
        }
    },
methods: {
    // 审核通过和审核不通过
    async toChangeStatus(id,status){
        let data={id,status};
        let res=await changeStatus(data).then(res=>{
            this.$message({
                type:'success',
                message:res.message
            });
            this.visible=false;
            this.findAllArticle()
        })
    },
    // 审核功能--审核不通过 审核通过
    toAudit(row) {
        this.visible=true;
        this.article=row
    },
    // 推荐功能
    roRecommend(id, status) {
        this.$confirm("是否继续推荐此咨询?", "推荐咨询", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
        })
        .then(async () => {
        let res = await changeStatus({id,status});
            this.$message({
                type: "success",
                message: res.message
            });
        this.findAllArticle();
        })
        .catch(() => {
        this.$message({
            type: "info",
            message: "已取消删除"
        });
        });
    },
    //给删除按钮绑定事件
    toDelete(id){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(async() => {
                let res = await deleteByIdPro({id:id});
                console.log(res);
                //刷新页面 重新发请求
                this.findAllArticle();
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
        });
    },
    // 跳转到发布咨询详情页
    toPublish() {
        this.$router.push({
            path:'/release/index',
        })
    },
        
    toSearch() {
        this.findAllArticle();
    },
    moment,
    handleSizeChange(pageSize) {
        this.params.pageSize = pageSize;
        this.params.page = 1;
    },
    handleCurrentChange(page) {
        this.params.page = page;
    },
    // 封装资讯栏目方法
    async findAllCategory() {
        let res = await findAll();
        this.category = res.data;
    },
    // 封装分页多条件查询文章信息方法
    async findAllArticle() {
        let temp = {
            ...this.params,
            ...this.form
        };
        for (let key in temp) {
            if (!temp[key]) {
            delete temp[key];
            }
        }
        let res = await pageQueryArticles(temp).then(res => {
            this.tableData = res.data.list;
            this.total = res.data.total;
        });
    }
},
    created() {
        this.findAllCategory();
        this.findAllArticle();
    }
};
</script>
<style lang="scss">
</style>